import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import avatar from '../../../static/home/avatar.jpg'
import {
  RightWrapper,
  LoginMain,
  LoginInput,
  UserItem,
} from '../style'

class Login extends Component {
  constructor(props){
    super(props)
    this.state = {
      name: props.style
    }
  }
  render() {
    return (
      <Fragment>
        <RightWrapper className={this.state.name}>
          <p className="title">请登录</p>
          <LoginMain>
            <LoginInput className="login-input-box">
              <div className="login-ico iconfont">&#xe642;</div>
              <input type="text" />
            </LoginInput>
            <LoginInput className="login-input-box">
              <div className="login-ico iconfont">&#xe608;</div>
              <input type="password" />
            </LoginInput>
            <p className="forget-password"><span>忘记密码</span></p>
            <div className="login-btn">
              <button>登录</button>
              <button>注册</button>
            </div>
          </LoginMain>
        </RightWrapper>
        <RightWrapper className={this.state.name}>
          <p className="title">" 欢迎！ "</p>
          <UserItem>
            <img src={avatar} alt="" />
            <span>2530047589</span>
            <button>退出登陆</button>
          </UserItem>
        </RightWrapper>
      </Fragment>
    )
  }
  componentWillReceiveProps(props){//组件接收到新的props值时触发
    this.setState({
      name: props.style
    })
  }
}

const LoginState = (state) => {
  return {

  }
}

const LoginDispatch = (dispatch) => {
  return {

  }
}

export default connect(LoginState, LoginDispatch)(Login)